<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="场站名称" prop="stationName">
        <el-input
          v-model="queryParams.stationName"
          placeholder="请输入场站名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="场站编号" prop="stationCode">
        <el-input
          v-model="queryParams.stationCode"
          placeholder="请输入场站编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item  label="所属区域" prop="areaCode">
        <el-select v-model="queryParams.areaCode"  placeholder="请选择">
          <el-option
            v-for="item in jurisdictionUnitData"
            :key="item.areaCode"
            :label="item.areaName"
            :value="item.areaCode"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="监管单位" prop = "supervisionUnit">
        <el-select v-model="queryParams.supervisionUnit" placeholder="请选择" clearable>
          <el-option
            v-for="dict in station_jgdw"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--<el-col :span="1.5">-->
        <!--<el-button v-if="station_btn"-->
                   <!--type="primary"-->
                   <!--icon="el-icon-plus"-->
                   <!--size="mini"-->
                   <!--@click="handleAdd"-->
                   <!--v-hasPermi="['weight:station:add']"-->
        <!--&gt;新增</el-button>-->
      <!--</el-col>-->
      <!--<el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:station:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:station:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:station:export']"
        >导出</el-button>
      </el-col>-->
    </el-row>

    <el-table v-loading="loading" :data="stationList" :max-height="tableHeight" @selection-change="handleSelectionChange">
<!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="场站名称" align="left" prop="stationName" />
      <!--<el-table-column label="场站编号" align="center" prop="stationCode" />-->
      <el-table-column label="联系人" align="center" prop="contacts" width="120px"/>
      <el-table-column label="联系电话" align="center" prop="telephone" />
      <el-table-column label="联系地址" align="left" prop="address" width="310px" :show-overflow-tooltip="true" />
      <el-table-column label="监管单位" align="center" prop="supervisionUnitForChinese" />
      <el-table-column label="企业性质" align="center" prop="enterpriseTypeStringForChinese" />
      <el-table-column label="所属区域" align="center" prop="jurisdictionUnit" />
      <el-table-column label="场站视频" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleVideo(scope.row)"
            v-hasPermi="['weight:station:query']"
          >观看视频</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
            v-hasPermi="['weight:station:query']"
          >详细</el-button>

          <!--<el-button
            size="mini"
            type="text"
            icon="el-icon-s-custom"
            @click="handlePersonView(scope.row)"
            v-hasPermi="['weight:station:query']"
          >人员</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-odometer"
            @click="handleRecordUpdate(scope.row)"
            v-hasPermi="['weight:station:query']"
          >称重</el-button>-->
          <!--<el-button
            size="mini"
            type="text"
            icon="el-icon-odometer"
            @click="handleRecordLedger(scope.row)"
            v-hasPermi="['weight:station:query']"
          >台账</el-button>-->

          <!--<el-button-->
            <!--size="mini"-->
            <!--type="text"-->
            <!--icon="el-icon-odometer"-->
            <!--@click="handleUpdate(scope.row)"-->
            <!--v-hasPermi="['weight:station:edit']"-->
          <!--&gt;修改</el-button>-->
          <!--<el-button v-if="station_btn"-->
            <!--size="mini"-->
            <!--type="text"-->
            <!--icon="el-icon-delete"-->
            <!--@click="handleDelete(scope.row)"-->
            <!--v-hasPermi="['weight:station:remove']"-->
          <!--&gt;删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改场站信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="场站名称" prop="stationName" v-if="form.id != undefined">
              <el-input v-model="form.stationName" :disabled="admin_dis"  placeholder="请输入场站名称" maxlength="30"  show-word-limit/>
<!--              <el-input v-model="form.stationName" v-hasRole="['wxygc','station','emergency_manage','traffic_manage']" disabled placeholder="请输入场站名称" />-->
            </el-form-item>
            <el-form-item label="场站名称" prop="stationName" v-else>
              <el-input v-model="form.stationName"  placeholder="请输入场站名称" maxlength="30"  show-word-limit/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contacts">
              <el-input v-model="form.contacts" placeholder="请输入联系人" maxlength="20"  show-word-limit/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="telephone">
              <el-input v-model="form.telephone" placeholder="请输入联系电话" maxlength="20"  show-word-limit/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址" maxlength="50"  show-word-limit/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域" v-if="form.id == undefined" prop="jurisdictionUnit">
              <!-- <el-input v-model="form.jurisdictionUnit" placeholder="请输入管辖单位" />-->
              <el-select v-model="form.jurisdictionUnit"  placeholder="请选择" @change="selectChanged">
                <el-option
                  v-for="item in jurisdictionUnitData"
                  :key="item.areaCode"
                  :label="item.areaName"
                  :value="item.areaCode"
                ></el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="属地" v-if="form.id == undefined" prop="town">
              <!-- <el-input v-model="form.town" placeholder="请输入属地" />-->
              <el-select v-model="form.town"  placeholder="请选择">
                <el-option
                  v-for="item in townData"
                  :key="item.areaCode"
                  :label="item.areaName"
                  :value="item.areaCode"
                ></el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="办公面积" prop="officeArea">
              <el-input v-model="form.officeArea" @blur="officeAreaChange" placeholder="请输入办公面积(单位：平方米)" maxlength="15"  show-word-limit/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库面积" prop="warehouseArea">
              <el-input v-model="form.warehouseArea" @blur="warehouseAreaChange" placeholder="请输入仓库面积(单位：平方米)" maxlength="15"  show-word-limit/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="监管单位" prop="supervisionUnit" v-hasRole="['admin']">
              <el-select v-model="form.supervisionUnit"  placeholder="请选择">
                <el-option
                  v-for="dict in station_jgdw"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="企业性质" prop="enterpriseType" v-hasRole="['admin']">
              <el-select v-model="form.enterpriseType" multiple placeholder="请选择">
                <el-option
                  v-for="dict in station_xz"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="运单所有权限" prop="isAllPermissions" v-hasRole="['admin']">
              <el-radio-group v-model="form.isAllPermissions">
                <el-radio
                  v-for="dict in dict_allPermissions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否出场检查" prop="leaveCheck" v-hasRole="['admin']">
              <el-radio-group v-model="form.leaveCheck">
                <el-radio
                  v-for="dict in dict_allPermissions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="是否有特种设备" prop="isSpecialEquipment" v-hasRole="['admin']">
            <el-radio-group v-model="form.isSpecialEquipment">
              <el-radio
                v-for="dict in dict_allPermissions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item style="float: left" label="门头照片" prop="doorwayPhotoPath">
              <el-upload
                :multiple="true"
                accept=".jpg, .png, .gif, .bmp, .jpeg"
                :headers="upload.headers"
                :action="upload.url2"
                list-type="picture-card"
                :show-file-list="false"
                :on-success="handledoorwayPhotoPathSuccess"
                :on-progress="handleDoorwayPhotoPathProgress"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.doorwayPhotoPath" :src="form.doorwayPhotoPath" :preview-src-list="[form.doorwayPhotoPath]" class="att">
                <el-progress v-if="upload.videoFlag == true" type="circle" :percentage="upload.videoUploadPercent" :width="80" style="margin-top: 16%"></el-progress>
                <div v-if="(form.doorwayPhotoPath == null || form.doorwayPhotoPath == '') && upload.videoFlag == false"><i class="el-icon-plus"></i></div>
              </el-upload>
            </el-form-item>
            <el-form-item style="float: left;margin-left: 20%" label="仓库照片" prop="warehousePhotoPath">
              <el-upload
                :multiple="true"
                accept=".jpg, .png, .gif, .bmp, .jpeg"
                :headers="upload.headers"
                :action="upload.url2"
                list-type="picture-card"
                :show-file-list="false"
                :on-success="handlewarehousePhotoPathSuccess"
                :on-progress="handleWarehousePhotoPathProgress"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.warehousePhotoPath" :src="form.warehousePhotoPath" :preview-src-list="[form.warehousePhotoPath]" class="att">
                <el-progress v-if="upload.videoFlag2 == true" type="circle" :percentage="upload.videoUploadPercent2" :width="80" style="margin-top: 16%"></el-progress>
                <div v-if="(form.warehousePhotoPath == null || form.warehousePhotoPath == '') && upload.videoFlag2 == false"><i class="el-icon-plus"></i></div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item style="float: left" label="图章上传" prop="sealPath" v-hasRole="['admin']">
              <el-upload
                :multiple="true"
                accept=".jpg, .png, .gif, .bmp, .jpeg"
                :limit="1"
                :headers="upload.headers"
                list-type="picture-card"
                :action="upload.url"
                :disabled="upload.isUploading"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-progress="handleSealPathProgress"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.sealPath" :src="form.sealPath" :preview-src-list="[form.sealPath]" class="att">
                <el-progress v-if="upload.videoFlag3 == true" type="circle" :percentage="upload.videoUploadPercent4" :width="80" style="margin-top: 16%"></el-progress>
                <!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                <div v-if="(form.sealPath == null || form.sealPath == '') && upload.videoFlag3 == false"><i class="el-icon-plus"></i></div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--场站详细 -->
    <el-dialog title="场站详情" :visible.sync="openView" width="700px">
      <el-form ref="form" :model="form" label-width="130px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="场站名称：">{{ form.stationName }}</el-form-item>
            <el-form-item label="场站编号：">{{ form.stationCode }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人：">{{ form.contacts }}</el-form-item>
            <el-form-item label="联系电话：">{{ form.telephone }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系地址：">{{ form.address }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label="所属区域：">{{ form.jurisdictionUnitName }}</el-form-item>
            <el-form-item  label="属地：">{{ form.townName }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="办公面积：">{{ form.officeArea }}</el-form-item>
            <el-form-item label="仓库面积：">{{ form.warehouseArea }}</el-form-item>
          </el-col>

          <el-col :span="12" v-hasRole="['admin']">
            <el-form-item label="监管单位：">{{ selectDictLabel(this.station_jgdw,form.supervisionUnit) }} </el-form-item>
          </el-col>
          <el-col :span="12" v-hasRole="['admin']">
            <el-form-item label="企业性质：">{{ visibleTypeFormat(form) }} </el-form-item>
          </el-col>
          <el-col :span="12" v-hasRole="['admin']">
            <el-form-item label="运单所有权限：">{{ visibleFormat(form) }} </el-form-item>
          </el-col>
          <el-col :span="12" v-hasRole="['admin']">
            <el-form-item label="是否出厂检查：">{{ selectDictLabel(this.dict_allPermissions,form.leaveCheck) }} </el-form-item>
          </el-col>
          <el-col :span="24" v-hasRole="['admin']">
            <el-form-item label="是否有特种设备：">{{ selectDictLabel(this.dict_allPermissions,form.isSpecialEquipment) }} </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item style="float: left" label="门头照片：">
              <div v-if="form.doorwayPhotoPath">
                <el-image  :src="form.doorwayPhotoPath" :preview-src-list="[form.doorwayPhotoPath]" class="att">
                  <div slot="error" class="image-slot">
                    暂无图片
                  </div>
                </el-image>
              </div>
              <div v-else>暂无图片</div>
            </el-form-item>
            <el-form-item style="float: left" label="仓库照片：">
              <div v-if="form.warehousePhotoPath">
                <el-image  :src="form.warehousePhotoPath" :preview-src-list="[form.warehousePhotoPath]" class="att">
                  <div slot="error" class="image-slot">
                    暂无图片
                  </div>
                </el-image>
              </div>
              <div v-else>暂无图片</div>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openView = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!--台账详细 -->
    <el-dialog title="选择台账" :visible.sync="openLedgerView" width="700px">
      <el-table v-loading="loading" :data="ledgerList">
        <el-table-column label="台账名称" align="center" prop="ledgerName" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleLedgerView(scope.row)"
              v-hasPermi="['weight:station:query']"
            >详细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openLedgerView = false">关 闭</el-button>
      </div>
    </el-dialog>

    <div class="videoview" style="display:none;">
      <iframe width=0 height=0 id="url" :src="ifurl"></iframe>
    </div>

    <el-dialog :title="title" :visible.sync="openVideoPlayer" width="800px" height="400px;">
      <!--在视频外面加一个容器-->
      <div class="input_video">
        <div class="video-div" style="margin-bottom: 5px;">
          <ul class="changeVideo">
            <li v-for="(item,index) in cameraList" :class="chav==index?'liactive':''" ><a @click="changeVideo(item.videoUrl,index)"  >{{item.caneraName}}</a></li>
          </ul>
        </div>
        <div id="video-content">
          <video
            id="myVideo"
            class="video-js vjs-default-skin"
          >
            <source
              src=""
              type=""
            >
          </video>
        </div>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openIframe" width="800px" height="400px;">
      <!--在视频外面加一个容器-->
      <div class="input_video">
        <div class="video-div" style="margin-bottom: 5px;">
          <ul class="changeVideo">
            <li v-for="(item,index) in cameraList" :class="chav==index?'liactive':''" ><a @click="changeVideo(item.videoUrl,index)"  >{{item.caneraName}}</a></li>
          </ul>
        </div>
        <iframe width="740px" height="400px" v-if="openIframe" :src="frUrl" frameborder=0 allowfullscreen></iframe>
      </div>
    </el-dialog>
    <el-dialog
      title="观看视频"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
      :before-close="handleClose">
      <div>
        <div><span class="vedioButton" :class="channelNumber==item.channelNumber?'active':''" v-for="(item,index) in vedioList" :key="index" @click="toggleVedio(item)">{{item.channelName}}</span></div>
         <div >
         <div  id="divPlugin" class="plug"></div>
         <p style="color:red">{{showLoadingText}}</p>
         </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </span>
</el-dialog>
  </div>
</template>

<script>
import { listSite, getStation, delStation, addStation, updateStation, exportStation,getTown,getVideoPath, getAreaListByUserId } from "@/api/map/station";
  import { getToken } from "@/utils/auth";

  export default {
    name: "Station",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 场站信息表格数据
        stationList: [],
        // 台账信息表格数据
        ledgerList: [],
        // 弹出层标题
        title: "",
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          videoFlag:false,
          videoFlag2:false,
          videoFlag3:false,
          videoUploadPercent: 0,
          videoUploadPercent2: 0,
          videoUploadPercent3: 0,
          // 上传的地址
          // url: process.env.VUE_APP_BASE_API + "/system/station/upload",
          url: process.env.VUE_APP_BASE_API + "/common/upload",
          url2: process.env.VUE_APP_BASE_API + "/common/upload",
        },
        //字典-是否是
        dict_allPermissions: [],
        //字典-监管单位
        station_jgdw: [],
        //字典-企业性质
        station_xz:[],
        // 管辖单位
        jurisdictionUnitData: [],
        //所属单位
        townData: [],
        // 是否显示弹出层
        open: false,
        station_btn: false,
        admin_dis: true,
        tableHeight: window.innerHeight - 275,
        //场站密码
        station_pwd: false,
        //详情弹窗
        openView:false,
        openLedgerView:false,

        isVedio: false,

        ifurl: '',


        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          waybillNum: undefined,
          stationName: undefined,
          stationCode: undefined,
          carNo: undefined,
          driverName: undefined,
          isAbnormal: undefined,
          hasExit: undefined,
          areaCode: undefined,
          supervisionUnit:undefined
        },
        // 表单参数
        form: {
          isAllPermissions: 0
        },
        // 表单校验
        rules: {
          stationName: [
            { required: true, message: "场站名称不能为空", trigger: "blur" }
          ],
          stationCode: [
            { required: true, message: "场站编号不能为空", trigger: "blur" }
          ],
        },
        frUrl: '',
        openVideoView: false,
        openIframe: false,
        openVideoPlayer: false,
        cameraList: [],
        chav:0,
        myPlayer: undefined,

         vedioList:[],
            dialogVisible:false,
            ip:'',
            port:'',
            user:'',
            password:'',
            channelNumber:1,
            iRet:0,
            activeVedio:1,
            vedioloading:false,
            showLoadingText:''
      };
    },
    created() {
      this.getList();

      this.getDicts("is_all_permissions").then(response => {
            this.dict_allPermissions = response.data;
        });
      this.getDicts("station_jgdw").then(response => {
          this.station_jgdw = response.data;
      });
      this.getDicts("station_xz").then(response => {
          this.station_xz = response.data;
      });

      const roles = this.$store.getters && this.$store.getters.roles;
      for (let rol of roles){
        if ('admin'==rol){
          this.station_pwd=true;
          this.station_btn=true;
          this.admin_dis=false;
        }
      }

      getAreaListByUserId().then(response =>{
        this.jurisdictionUnitData=response.data;
      });
    },
    methods: {
      /** 查询场站信息列表 */
      getList() {
        this.loading = true;
        listSite(this.queryParams).then(response => {
          this.stationList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 获取管辖地，属地 **/
      getTown(areaCode) {
        getTown(areaCode).then(response =>{
            this.townData=response.data;
          });
      },
      /** 管辖地选中 **/
      selectChanged(value) {
        this.getTown(value);
        this.form.town = null
      },
      visibleFormat(row, column) {
        return this.selectDictLabel(this.dict_allPermissions, row.isAllPermissions);
      },

      visibleTypeFormat(form) {
          var type = form.enterpriseType;
          var xzString ;
          var type2 =[];
          if(typeof(type) != "undefined" && type != null){
              for(var i=0;i<type.length;i++){
                  type2.push(this.selectDictLabel(this.station_xz, type[i]));
              }
              if(typeof(type2) != "undefined"){
                  xzString = type2.join(",");
              }
              if (xzString.substr(0,1)==',') {
                  xzString=xzString.substr(1);
              }
          }
          return xzString;
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          stationName: undefined,
          stationCode: undefined,
          contacts: undefined,
          telephone: undefined,
          address: undefined,
          jurisdictionUnit: undefined,
          town: undefined,
          isAllPermissions: undefined,
          delFlag: undefined,
          createTime: undefined,
          createId: undefined,
          updateTime: undefined,
          updateId: undefined,
          remark: undefined,
          sealPath: '',
          leaveCheck: undefined,
          isSpecialEquipment: undefined,
          officeArea: undefined,
          warehouseArea: undefined,
          doorwayPhotoPath: '',
          warehousePhotoPath: '',
          supervisionUnit: undefined,
          enterpriseType: [],
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加场站信息";
        getUser().then(response => {
          this.postOptions = response.posts;
          this.roleOptions = response.roles;
          this.open = true;
          this.title = "添加用户";
          this.form.password = this.initPassword;
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getStation(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改场站信息";
        });
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateStation(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addStation(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除场站数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delStation(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有场站信息数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportStation(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
      },
      /** 详情 **/
      handleView(row) {
        getStation(row.id).then(response => {
          this.form = response.data;
          this.openView = true;
        });
      },
      /** 选择台账 **/
      handleRecordLedger(row) {
        // getStation(row.id).then(response => {
        //   this.form = response.data;
        // });
        this.ledgerList = [
          {"ledgerName":"管理人员等级台账","stationId":row.id,"name":"managementView"},
          {"ledgerName":"进驻经营业户登记台账","stationId":row.id,"name":"businessView"},
          {"ledgerName":"安全生产领导小组会议记录台账","stationId":row.id,"name":"meetingView"},
          {"ledgerName":"安全教育活动台账","stationId":row.id,"name":"educationView"},
          {"ledgerName":"安全管理监督检查台账","stationId":row.id,"name":"inspectionView"},
          {"ledgerName":"消防设施设备管理台账","stationId":row.id,"name":"manageView"},
          {"ledgerName":"治超管理台账","stationId":row.id,"name":"registrationView"},
          {"ledgerName":"车辆出厂检查台账","stationId":row.id,"name":"checkView"},
          {"ledgerName":"经营户台账","stationId":row.id,"name":"accountView"},
          {"ledgerName":"叉车台账","stationId":row.id,"name":"forkliftView"},
        ]
        this.openLedgerView = true;
      },
      initVideo(url,type) {
        if(document.getElementById("myVideo")==null || document.getElementById("myVideo").length <= 0 ){
            var videoContent = document.getElementById("video-content");
            videoContent.innerHTML =
                "<video\n" +
                '            id="myVideo"\n' +
                '            class="video-js vjs-default-skin"\n' +
                "          >\n" +
                "            <source\n" +
                '              src=""\n' +
                '              type=""\n' +
                "            >\n" +
                "          </video>";
        }
        //初始化视频方法
        let myPlayer = this.$video(myVideo, {
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: "muted",
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          width: "740px",
          //设置视频播放器的显示高度（以像素为单位）
          height: "400px",
          playbackRates: [0.5, 1, 1.5, 2],
          controlBar: {
            playToggle: {
              replay: false
            },
            volumePanel: {
              inline: false
            }
          },
          sources: [{
            src: url,
            type: type
          }]
        });
        myPlayer.play();
        this.myPlayer = myPlayer;
      },
      handleVideo(row){
        this.vedioList=row.siteCameraList
        console.log(this.vedioList)
        var that=this
        this.dialogVisible = true
         this.ip=this.vedioList[0].ip;
         this.port=this.vedioList[0].port;

         this.user=this.vedioList[0].userName
         this.password=this.vedioList[0].passWord
         this.channelNumber=this.vedioList[0].channelNumber
         this.vedioloading=true
        setTimeout(function(){
                   if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
		    alert("您还未安装过插件,请先安装WebComponents.exe！");
		     return;
	       }
        //第一步，初始化并嵌入插件
        WebVideoCtrl.I_InitPlugin('100%', '100%',{
          iWndowType: 1,
          cbInitPluginComplete: function () {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
          }
        })
        WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
        WebVideoCtrl.I_ChangeWndNum(1)
         this.showLoadingText='开始预览'
         that.cameraDirectPlay()
        },500)
      },
           toggleVedio(item){
         this.ip=item.ip;
         this.port=item.port;
         this.user=item.userName
         this.password=item.passWord
         this.channelNumber=item.channelNumber
          this.showLoadingText='开始预览'
         if(this.iRet!=-1&&typeof(this.iRet)!=='undefined'){
            this.cameraDirectPlay()  
         }else{      
             this.iChannelID()
         }
        
      },
      cameraDirectPlay(){
         var that=this
       // 第二步，登录设备
       this.iRet =  WebVideoCtrl.I_Login(that.ip, 1, that.port, that.user, that.password,{
          success:function (){
            that.showLoadingText = "登录成功！";
            // WebVideoCtrl.I_GetAnalogChannelInfo(that.ip,{async: false})
            //第三步，播放画面
            let iRetPlay=WebVideoCtrl.I_StartRealPlay(that.ip, {
              iStreamType:2,
              iChannelID:that.channelNumber
            }) 
            if (0 == iRetPlay) {
              that.showLoadingText = "预览成功！";
            } else {
              that.showLoadingText = "预览失败！";
            }
          },error:function(){
            // that.showLoadingText = "预览失败！";
          }
        })  
        if(typeof(this.iRet)=='undefined'){
           that.showLoadingText = "登录成功";
        }
      },
      iChannelID(){    
        var that=this
       var oWndInfo = WebVideoCtrl.I_GetWindowStatus();
       if (oWndInfo != null) {// 已经在播放了，先停止
	        	WebVideoCtrl.I_Stop();
	         }
        let iRet=WebVideoCtrl.I_StartRealPlay(that.ip, {
              iStreamType:2,
              iChannelID:that.channelNumber
            }) 
            if (0 == iRet) {
              that.showLoadingText = "预览成功！";
            } else {
              that.showLoadingText = "预览失败！";
            }
      },
      handleClose(){
         this.showLoadingText='开始预览'
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus()

      if (oWndInfo != null) {
        var iRet = WebVideoCtrl.I_Stop();
        if (0 == iRet) {
          console.log("预览成功")
        } else {
          console.log("预览失败！")
        }
      }
        
        this.dialogVisible = false
        WebVideoCtrl.I_Logout(this.ip)
        console.log('退出成功')
      },
      isIe() {
        const userAgent = navigator.userAgent.toLowerCase()
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
          return true;
        }else{
          return false;
        }

      },
      /** 人员信息 **/
      handlePersonView(row){
        //this.$router.push({path: '/weight/worker/',query:{stationId:row.id}});
        this.$router.push({name: 'workerView', query:{stationId:row.id}})
      },
      /** 称重信息 **/
      handleRecordUpdate(row){
        // this.$router.push({path: '/weight/record/stationCode='+row.stationCode})
        this.$router.push({name: 'recordView', params: {stationCode: row.stationCode}})
      },
      /** 台账信息 **/
      handleLedgerView(row){
        // this.$router.push({path: '/weight/record/stationCode='+row.stationCode})
        this.$router.push({name: row.name, query: {stationId: row.stationId}})
        this.openLedgerView =false;
      },
      handleAvatarSuccess(response, file) {
        this.upload.videoFlag3 = false;
        this.upload.videoUploadPercent3 = 0;
        this.form.sealPath=response.fileName;
      },
      handleSealPathProgress(event, file, fileList){
        this.form.sealPath = "";
        this.upload.videoFlag3 = true;
        this.upload.videoUploadPercent3 = Math.floor(event.percent);
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!')
          return false
        }
      },
      // 上传门头照片
      handledoorwayPhotoPathSuccess(response, file) {
        this.upload.videoFlag = false;
        this.upload.videoUploadPercent = 0;
        this.form.doorwayPhotoPath=response.fileName;
      },
      handleDoorwayPhotoPathProgress(event, file, fileList){
        this.form.doorwayPhotoPath = "";
        this.upload.videoFlag = true;
        this.upload.videoUploadPercent = Math.floor(event.percent);
      },
      // 上传仓库照片
      handlewarehousePhotoPathSuccess(response, file) {
        this.upload.videoFlag2 = false;
        this.upload.videoUploadPercent2 = 0;
        this.form.warehousePhotoPath=response.fileName;
      },
      handleWarehousePhotoPathProgress(event, file, fileList){
        this.form.warehousePhotoPath = "";
        this.upload.videoFlag2 = true;
        this.upload.videoUploadPercent2 = Math.floor(event.percent);
      },
      officeAreaChange(){
        const officeAreaChange = this.form.officeArea;
        if (officeAreaChange.slice(officeAreaChange.length-3,officeAreaChange.length) != '平方米'){
          this.form.officeArea = officeAreaChange + '平方米';
        }
      },
      warehouseAreaChange(){
        const warehouseAreaChange = this.form.warehouseArea;
        if (warehouseAreaChange.slice(warehouseAreaChange.length-3,warehouseAreaChange.length) != '平方米'){
          this.form.warehouseArea = warehouseAreaChange + '平方米';
        }
      },
      changeVideo(videoUrl,index){
        this.chav=index
        if (
            this.myPlayer != null &&
            this.myPlayer != undefined &&
            this.myPlayer != ""
        ) {
            if (this.myPlayer.isDisposed() == false) {
                this.myPlayer.dispose();
            }
        }
        if(this.openVideoPlayer){
          let type = "application/x-mpegURL";
          if(videoUrl.indexOf("mp4")> -1){
            type= 'video/mp4';
          }
          setTimeout(() => {
            this.initVideo(videoUrl,type);
          }, 100);
        }
        if(this.openIframe){
          this.frUrl = videoUrl;
        }
      }
    },watch:{
      /*trendData:function(newVal,oldVal){
        const  _person=newVal.persionList;
        const  _company=newVal.compayList;

        for(let item of _person){
          this.titleData.unshift(item.days);
          this.personList.unshift(item.value);
        }

        for(let itemcomp of _company){
          this.companyList.unshift(itemcomp.value);
        }
        this.drawLine();
      }*/
    }
  };
</script>
<style lang="scss" scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .att{
    width:120px;height:120px;display: block;
  }

  .video-div ul{
    display:flex;
    list-style: none;
    margin:0;
    padding:0;
  }
  .video-div ul li{
    height:40px;
    line-height:40px;
    width:120px;
    text-align:center;
  }
  .liactive{
    background:#1890ff
  }
  .liactive a{
    color:#fff;
  }
     #divPlugin{
    width:100%;
    height:300px;
    background:rgba(0,0,0,0.8)
  }
.vedioButton{
    cursor: pointer;
  display:inline-block;
  background:skyblue;
  color:#fff;
  padding:5px 15px;
}      
.active{
  background:burlywood;
}
</style>
